<template>
  <view class="zh-shop-shopping-cart-sure">
	<view class="invoice"  @click="selectInvoice">
		<view>
			<text class="title font-30 font-bold font-302D2D">开票抬头</text>
		</view>
		<view class="bottom display-flex justify-between">
			<text class="title">{{ orderSubmitData.invoiceTitle || '请选择' }}</text>
			<view class="right">
				<text class="font-28 font-bold">选择</text>
				<image src="@/static/icons/right_arrow.png" class="right-arrow-icon"/>
			</view>
		</view>
	</view>
	<view class="purchase">
		<view>
			<text class="title font-30 font-bold font-302D2D">卖家信息</text>
		</view>
		<view class="center display-flex justify-between">
			<text class="font-302D2D font-26">{{ orderSubmitData.shopName }}</text>
		</view>
		<view class="bottom display-flex align-center">
			<text class="font-302D2D font-26">交易员：{{ orderSubmitData.sellNickName }}</text>
			<text class="tel font-26" v-if="orderSubmitData.sellPhonenumber">{{ orderSubmitData.sellPhonenumber }}</text>
			<button class="button font-24" v-if="orderSubmitData.sellPhonenumber" @click="handleLink(orderSubmitData.sellPhonenumber)">
				<image src="@/static/icons/tel_icon.png" class="tel-icon"/>
				联系
			</button>
		</view>
	</view>
	<view class="delivery-type">
		<view class="tabs font-30 display-flex justify-between">
			<text class="item" :class="{'active':orderSubmitData.form.pickingmethod == Pickingmethod.buyPickUp}" @click="selectPickingmethod(Pickingmethod.buyPickUp)">自提</text>
			<text class="item" :class="{'active':orderSubmitData.form.pickingmethod == Pickingmethod.sellDelivery}" @click="selectPickingmethod(Pickingmethod.sellDelivery)">发货</text>
		</view>
		<view class="content">
		<!-- 	<view class="self-delivery display-flex">
				<image src="@/static/icons/address_icon.png" class="address-icon"/>
				<view class="right">
					<view class="font-30 font-302D2D font-bold">中恒塱宝仓</view>
					<view class="mt-20 font-24 font-302D2D">广东省佛山市禅城区  下塱佛西针织工业园东区一路</view>
					<view class="font-24 font-302D2D">中恒纺织交易市场</view>
				</view>
			</view> -->
			<view class="send-goods display-flex" @click="selectAddress"  v-if="orderSubmitData.form.contacts">
				<image src="@/static/icons/address_icon.png" class="address-icon"/>
				<view class="right flex">
					<view class="top display-flex justify-between align-center">
						<view class="ml-20">
							<text class="font-30 font-302D2D font-bold">{{ orderSubmitData.form.contacts }}</text>
							<text class="font-26 font-999 ml-20">{{ orderSubmitData.form.contactmethod }}</text>
						</view>
						<view class="mt-20 font-24 font-302D2D display-flex align-center">
							<text>选择</text>
							<image src="@/static/icons/right_arrow.png" class="right-arrow-icon ml-15"/>
						</view>
					</view>
					<view class="bottom mt-20 display-flex font-24 font-302D2D">
						<text>{{ orderSubmitData.form.province + orderSubmitData.form.city +  orderSubmitData.form.area }}</text>
						<text class="ml-20">{{  orderSubmitData.form.address }}</text>
					</view>
				</view>
			</view>
			<view class="no-address"  @click="selectAddress" v-else>
				<cell-group>
					<cell-item title="收货地址" value="选择" :border="false"></cell-item>
				</cell-group>
			</view>
		</view>
	</view>
	<view class="section" v-for="topItem in orderSubmitData.dtlist" :key="topItem.spckmc">
		<view class="top display-flex justify-between align-center">
			<view class="display-flex align-center">
				<text class="title">中恒纺织交易市场（广东）有限公司</text>
			</view>
			<text class="stock">{{ topItem.spckmc }}</text>
		</view>
		<view class="bottom">
			<view class="item display-flex justify-between" v-for="item in topItem.list" :key="item.id">
				<view class="thumbnail">
					<template  v-for="(file, fileIndex) in item.wpggAFileDataList" :key="file.id">
						<image :src="util.previewImg(file.url)" v-if="fileIndex == 0" mode="aspectFit" /> 
					</template>
				</view>
				<view class="center flex">
					<view class="font-24">{{ item.spzs }}</view>
					<view class="content mt-20">
						<view class="font-22 font-666">纱支：{{ item.wpggA || '--' }}</view>
						<view class="font-22 font-666">品牌：{{ item.spcd || '--' }}</view>
						<view class="font-22 font-666">价格：{{ item.price?'¥' + item.price + '/吨':'电议'}}</view>
					</view>
				</view>
				<view class="right">
					<view class="font-302D2D font-24">{{ item.weight }}吨</view>
					<view class="font-302D2D font-24 font-bold">¥{{ item.subtotal }}</view>
				</view>
			</view>
			<!-- <view class="item-bottom">
				<u-input title="买家备注" placeholder="填写备注信息" :border="false" v-model="orderSubmitData.form.buyremark" labelWidth="160"/>
			</view> -->
		</view>
		<view class="mt-20">
			<cell-group>
				<cell-item title="货物重量" :value="topItem.weight + '吨'" :arrow="false"></cell-item>
				<cell-item title="货物金额" :value="'¥' + topItem.subtotal" :arrow="false"></cell-item>
				<cell-item :title="'手续费 ' + orderFee +'元/吨'" :value="'¥' + topItem.commission" :border="false" :arrow="false"></cell-item>
			</cell-group>
		</view>
	</view>
	<view class="buy-remark">
		<u-input title="买家备注" placeholder="填写备注信息" :border="false" v-model="orderSubmitData.form.buyremark" labelWidth="160"/>
	</view>
	<view class="total display-flex justify-between align-center">
		<view class="font-302D2D font-26 mt-15 flex">
			<text class="font-bold">合计：</text>
			<text class="font-FF661B font-28">¥{{ getSumList }}</text>
		</view>
		<button class="button app-primary-button font-28" hover-class="app-primary-button-active font-28" @click="submit">提交订单</button>
	</view>
  </view>
</template>

<script setup lang="ts">
	import type { OrderSubmitData } from '@/@type/order'
	import { onLoad } from '@dcloudio/uni-app'
	import { goods, systemApi, invoice } from '@/api'
	import { reactive, computed, ref } from 'vue'
	import { util, tip } from '@/utils'
	import { InvoiceStatus } from '@/enum/invoice'
	import { Businesstype, Ordersource, Pickingmethod, OrderStatus, Warehousetype, Ordertype } from '@/enum/order'
	import { Digit } from '@/enum/digit'
	import { useAuthStore } from '@/store/auth'
	
	const orderFee = ref('')
	const authStore = useAuthStore()
	const user = authStore.getUser()
	const orderSubmitData:any = reactive({
		invoiceTitle:'',
		sellNickName:'',
		sellPhonenumber:'',
		shopName:'',
		form:{
			businesstype:Businesstype.sales,
			ordersource:Ordersource.shop,
			ordertype:Ordertype.matchDeal,
			pickingmethod:Pickingmethod.buyPickUp,
			status:OrderStatus.waitSure,
			warehousetype:Warehousetype.storageWarehouse,
			buyid:authStore.getUser().userId,
			invoicingtitleid:'',
			sellid:'',
			platformOrderDtList:[],
			address:'',
			area:'',
			city:'',
			province:'',
			contactmethod:'',
			contacts:'',
			contactphone:'',
			buyremark:''
		},
		dtlist:[]
	})
	
	const invoiceData:any = reactive({
		 //获取开票抬头参数
		query: {
		 status: InvoiceStatus.enable,
		 shopid: user.shopId,
		 shopName:user.shopName
		},
		params:{
			pageNum:1,
			pageSize:999,
			reasonable:false,
		}
	})
	
	const sellCustomer: any  = reactive({
		query:{
			status:0,
			userType:'00',
			roleKey:'交易员'
		}
	})
	
	onLoad((options:any) => {
		getInvoiceList()
		getSellCustomer()
		getOrderFee()
		if(options.info) {
			const info = JSON.parse(decodeURIComponent(options.info))
			const data: any = info
			const spckmcArr: Array<string> = []
			const dataArr: Array<{spckmc:string, list:any}> = []
			for(let i in data) {
				if(!spckmcArr.includes(data[i].spckmc)) {
					spckmcArr.push(data[i].spckmc)
				}
			}
			for(let i in spckmcArr) {
				let obj: any = {spckmc:spckmcArr[i], list:[]}
				for(let j in data) {
					if(spckmcArr[i] == data[j].spckmc) {
						obj.list.push(data[j])
					}
				}
				dataArr.push(obj)
			}
			orderSubmitData.dtlist = dataArr
			orderSubmitData.form.platformOrderDtList = info 
			console.log(orderSubmitData.dtlist)
		}
	})
	
	const getOrderFee = () => {
		systemApi.getConfigKey('order_handling_fee').then((res:any) => {
			orderFee.value = res.msg
		})
	}
	
	const getInvoiceList = () => {
		invoice.getInvoiceList(invoiceData.query, invoiceData.params).then((res:any) => {
			const data  = res.rows
			if(data && data.length > 0) {
				data.map((item:any) => {
					if(item.isdefault === '1') {
						orderSubmitData.form.invoicingtitleid = item.id
						orderSubmitData.invoiceTitle = item.invoicetitle
					}
				})
			}
			 
		})
	}
	
	const getSumList = computed(() => {
		const dtlist = orderSubmitData.dtlist
		let total = 0
		for(let i in dtlist) {
			let weight = 0
			let subtotal = 0
			let commission = 0
			const list = dtlist[i].list
			for(let j in list) {
				weight = weight + parseFloat(list[j].weight) 
				subtotal = subtotal + parseFloat(list[j].subtotal) 
			}
			dtlist[i].weight = parseFloat(weight.toFixed(Digit.weight)) 
			dtlist[i].subtotal = parseFloat(subtotal.toFixed(Digit.amount)) 
			dtlist[i].commission = parseFloat((weight * Number(orderFee.value)).toFixed(Digit.amount))
			total = total + dtlist[i].subtotal 
		}
		
		return total
	})
	
	uni.$on('invoiceUpdate', (res:any) => {
		orderSubmitData.invoiceTitle = res.invoiceTitle || ''
		orderSubmitData.form.invoicingtitleid = res.id
	})
	
	uni.$on('addressUpdate', (res:any) => {
		orderSubmitData.form.address = res.address || ''
		orderSubmitData.form.area = res.area || ''
		orderSubmitData.form.city = res.city || ''
		orderSubmitData.form.province = res.province || ''
		orderSubmitData.form.contacts = res.contactname || ''
		orderSubmitData.form.contactmethod = res.contactphone || ''
	})
	
	const getSellCustomer = () => {
		goods.getCustomer(sellCustomer.query).then((res:any) => {
			orderSubmitData.form.sellid = res.rows[0].userId
			orderSubmitData.sellNickName = res.rows[0].nickName
			orderSubmitData.sellPhonenumber = res.rows[0].phonenumber
			orderSubmitData.shopName = res.rows[0].shopName
		})
	}
	
	const submit = () => {
		if(!orderSubmitData.form.buyid) return tip.showToast('没有买家信息')
		if(!orderSubmitData.form.sellid) return tip.showToast('没有卖家信息')
		if(!orderSubmitData.form.invoicingtitleid) return tip.showToast('请选择开票抬头')
		//if(!orderSubmitData.form.address || !orderSubmitData.form.province || !orderSubmitData.form.city || !orderSubmitData.form.area) return tip.showToast('请选择收货地址')
		goods.setOrderAdd(orderSubmitData.form).then((res:any) => {
			redirectTo('/pages/shop/orderSuccess')
		})
	}
	
	const handleLink = (phone:string) => {
		util.telphone(phone)
	}
	
	const selectPickingmethod = (val:string) => {
		orderSubmitData.form.pickingmethod = val
	}
	
	const selectInvoice = () => {
		navigateTo('/pages/userCenter/invoice/index?type=invoiceUpdate')
	}
	
	const selectAddress = () => {
		navigateTo('/pages/userCenter/address/index?type=addressUpdate')
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
	const redirectTo = (url:string) => {
		uni.redirectTo({url:url})
	}
</script>

<style lang="scss" scoped>
	.zh-shop-shopping-cart-sure {
		padding-bottom:150rpx;
		.invoice {
			background-color: $uni-bg-card-color;
			padding: 40rpx 30rpx;
			margin-top: 20rpx;
			.bottom {
				margin-top: 30rpx;
				.right {
					.right-arrow-icon {
						width: 13rpx;
						height: 25rpx;
						margin-left: 15rpx;
					}
				}
			}
		}
		.purchase {
			background-color: $uni-bg-card-color;
			padding: 40rpx 30rpx;
			margin-top: 20rpx;
			.center {
				margin-top: 30rpx;
			}
			.bottom {
				margin-top: 30rpx;
				.tel {
					text-decoration: underline;
					color:$uni-color-primary;
					margin-left: 29rpx;
				}
				.button {
					width: 116rpx;
					height: 41rpx;
					line-height: 41rpx;
					background-color: $uni-color-primary;
					border-radius: 21rpx;
					color:#fff;
					text-align:center;
					padding:0;
					margin-left:17rpx;
					.tel-icon {
						width:21rpx;
						height: 20rpx;
					}
				}
			}
		}
		.delivery-type {
			background-color: $uni-bg-card-color;
			margin-top: 20rpx;
			.tabs {
				.item {
					width:50%;
					height: 103rpx;
					line-height: 103rpx;
					background-color: #F8F8F8;
					text-align: center;
				}
				.active {
					background-color: $uni-bg-card-color;
					color:$uni-text-color-light-black;
				}
			}
			.content {
				padding:0rpx 30rpx;
				.self-delivery {
					padding:40rpx 0;
					.address-icon {
						width: 32rpx;
						height: 39rpx;
					}
					.right {
						margin-left: 23rpx;
					}	
				}
				.send-goods {
					padding:40rpx 0;
					.address-icon {
						width: 32rpx;
						height: 39rpx;
					}
					.right {
						margin-left: 23rpx;
						.top {
							.right-arrow-icon {
								width: 13rpx;
								height: 25rpx;
							}
						}
					}
				}
				.no-address {
					padding-top:10rpx;
				}
			}
		}
		.section {
			background-color: $uni-bg-card-color;
			padding:40rpx 30rpx 0;
			margin-top: 20rpx;
			.top {
				.title {
					font-size: $uni-font-size-30;
					color:$uni-text-color-light-black;
					font-weight: bold;
				}
				.stock {
					font-size:$uni-font-size-sm;
					color:$uni-text-color-dark-grey;
					
				}
			}
			.bottom {
				.item {
					border-bottom: 1rpx solid $uni-border-color;
					padding: 40rpx 0;
					.thumbnail {
						width: 160rpx;
						height: 160rpx;
						background: #FFFFFF;
						border: 1rpx solid #EEEEEE;
						border-radius: 10rpx;
						text-align:center;
						image {
							width: 100%;
							height:100%;
						}
					}
					.center {
						margin-left:20rpx;
						.content {
							width: 260rpx;
							height: 85rpx;
							background: #EFF0F4;
							border-radius: 6rpx;
							padding:14rpx 17rpx;
						}
					}
				}
			}
		}
		.buy-remark {
			background-color: #fff;
			padding:0rpx 30rpx;
			margin-top: 20rpx;
		}
		.total {
			background-color: #fff;
			position: fixed;
			bottom:0rpx;
			left:0;
			right:0;
			padding: 20rpx 30rpx;
			z-index:1;
			.button {
				width: 190rpx;
				height: 88rpx;
			}
		}
	}
</style>


